<template>
  <div id="product-detail-page" v-if="detail.id>0" :style="{
    paddingBottom:$route.query.onlyH5?'0px':'70px'
  }">
    <div class="page-title" :style="{
      width:$route.query.onlyH5?this.getWinSize().width+'px':'',
      top:(this.getSafeArea().top-4)+'px',
         }">
      <div id="back-button" @click="back()" v-if="!$route.query.onlyH5">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>商品详情</span>
      <i @click="shareSystem" v-if="!$route.query.onlyH5" class="el-icon-document-copy" type="primary"
            style="position: absolute; right: 5px; top: 12px; font-size: 24px"></i>
    </div>

    <div style="overflow-x: hidden;overflow-y: auto;position: relative; padding-bottom: 10px"
         :style="{
      top:(this.getSafeArea().top)+'px',
      height:(this.getWinSize().height-this.getSafeArea().top-($route.query.onlyH5?20:100))+'px',
    }">
      <!--轮播图-->
      <div class="swiper-banner product-banner" id="my-viewer" :style="{height:this.getWinSize().width+'px'}">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(imageSrc,key) in detail.imageArr" :key="key">
            <img class="home-banner-image" :src="imageSrc">
          </div>
        </div>
        <div class="swiper-pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
      </div>

      <!--价格区域-->
      <div class="price-box">
        <div class="price-row">
          <div class="left">
            <div class="price">
              <div class="price-span" v-if="isShopSkill()">
                <span>￥</span>{{ ToMoney(detail.shopProductStock.shopSkillPrice) }}
              </div>
              <div class="price-span over" v-show="!isShopSkill()">
                <span class="price">￥</span> <span class="price">{{ ToMoney(detail.shopProductStock.price) }}</span>

                <span v-if="detail.shopProductStock.score>0"
                      style="display: inline-block; margin-left: 5px; font-size: 12px">

                所需积分: <el-tag type="success" style="text-indent: 0px" v-text="detail.shopProductStock.score"></el-tag>
                </span>
              </div>
              <div class="group-price-span" v-if="detail.shopProductStock.groupPrice>0">团购:
                <span>￥</span>{{ ToMoney(detail.shopProductStock.groupPrice) }}
              </div>
              <div class="group-price-span" v-if="isShopSkill()">
                <span>抢购中</span>
                <cutdown-box :curr-seconds-params="detail.shopProductStock.surplusSeconds"/>
              </div>
              <el-button type="success" @click="goToShopSkill" v-if="isShopSkill()">立即抢购</el-button>

            </div>
          </div>
          <div class="right">
            <button class="record-button" @click="collect">
              <i class="el-icon" :class="isCollect?'el-icon-star-on':'el-icon-star-off'"></i>
              <span v-text="isCollect?'已收藏':'收藏'"></span>
            </button>
          </div>
          <div class="c"></div>
        </div>

        <div class="title ovd_s">
          {{ detail.name }}
        </div>
        <div class="sale-nums-score">
          <div class="score-box">
            <el-rate
              v-if="detail.id>0"
              class="score-item"
              v-model="((detail.score?detail.score:80)*0.05).toFixed(2)-0"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}">
            </el-rate>
          </div>
          <div class="text">
            <div class="item">总销量: <span v-text="detail.shopProductStock.saleNums"></span></div>
            <div class="item">剩余库存: <span v-text="detail.shopProductStock.nums"></span></div>
          </div>
          <div class="c"></div>
        </div>
      </div>

      <shop-info-item v-if="shop.id>0" :shop="shop"/>

      <!--型号-->
      <div class="model-info" @click="chooseModel" v-if="detail.modelArr.length>0">
        <div class="title">已选型号:</div>
        <div class="value" v-text="detail.shopProductStock.model"></div>
        <div class="icon" v-if="detail.shopProductStock.score===0">...</div>
      </div>

      <!--页面内部导航区域-->
      <div id="product-detail">
        <div class="product-nav">
          <div class="item" :class="productShowType===0?'curr':''" @click="productShowType=0">
            <span>宝贝详情</span>
          </div>
          <div class="item" :class="productShowType===1?'curr':''" @click="productShowType=1">
            <span>规格参数</span>
          </div>
        </div>

        <!--评价区域-->
        <div class="reply-box" v-if="detail.replyList && detail.replyList.length>0">
          <div class="title-line">
            <div class="left">最新评价</div>
            <div class="right">
              <span v-if="detail.replyList.length>0"
                    @click="showReplyAll">查看全部 ></span>
            </div>
          </div>
          <div class="reply-list">
            <reply-list-item v-for="(reply,index) in detail.replyList" :key="index" :reply-params="reply"/>
          </div>
        </div>

        <!--规格参数-->
        <div id="product-parameters-title" v-show="productShowType===1">规格参数</div>
        <table id="product-parameters-table" border="1" v-show="productShowType===1">
          <tr v-if="detail.shopProductStock.specificationsArr && detail.shopProductStock.specificationsArr.length>0"
              v-for="(item,index) in detail.shopProductStock.specificationsArr" :key="index">
            <td width="30%" v-text="item.name+':'"></td>
            <td>
              <span v-text="item.value"></span>
            </td>
          </tr>
        </table>
        <div style="text-align: center; color: #AAAAAA; line-height: 50px;" v-show="productShowType===1">
          <div
            v-if="!detail.shopProductStock.specificationsArr || detail.shopProductStock.specificationsArr.length===0">
            暂无规格信息~~~
          </div>
        </div>

        <!--详情区域-->
        <div v-show="productShowType===0" style="width: 95%; padding: 0px; margin: 0 auto">
          <img style="width: 100%" :src="image" :key="index" v-for="(image,index) in detail.imageArr">
          <div id="product-detail-content" style="width: 93%; margin: 0px auto; font-size: 13px; line-height: 25px;"
               v-html="detail.content">
          </div>

        </div>
      </div>

    </div>
    <!--底部导航-->
    <div class="product-bottom-nav" v-if="!$route.query.onlyH5">
      <div class="icon-list">
        <div class="item" @click="$router.push({
        name:'ShopHome',
        query:{
          id:shop.id
        }
        })">
          <i class="icon iconfont icon-dianpu"></i>
          <br>
          <span>店铺</span>
        </div>
        <div class="item" @click="$router.push('/Cart')">
          <i class="icon iconfont icon-gouwuchekong"></i>
          <br>
          <span>购物车</span>
        </div>
      </div>
      <div class="button-group">
        <el-button-group :class="{'has-group':detail.shopProductStock.groupPrice>0}">
          <el-button size="medium" type="primary" @click="addCart(detail)" :disabled="detail.shopProductStock.nums===0 || detail.shopProductStock.score>0">
            加入购物车
          </el-button>
          <el-button size="medium" type="danger" @click="goToBuy" :disabled="detail.shopProductStock.nums===0">
            立即购买
          </el-button>
          <el-button size="medium" type="danger" @click="goToGroupBuy" :disabled="detail.shopProductStock.nums===0"
                     v-if="detail.shopProductStock.groupPrice>0">
            拼团购买
          </el-button>
        </el-button-group>
      </div>
      <div class="c"></div>
    </div>
  </div>
</template>

<script>

import 'viewerjs/dist/viewer.css'
import Viewer from 'viewerjs'
import CartTools from '../tools/CartTools'
import ReplyList from '../common/ReplyList'
import ShopInfoItem from '../common/ShopInfoItem'
import ReplyListItem from '../common/ReplyListItem'
import CutdownBox from '../common/CutdownBox'

export default {
  name: 'ProductDetail',
  components: {CutdownBox, ReplyListItem, ShopInfoItem, ReplyList},
  data() {
    return {
      productShowType: 0,
      collectLoading: false,
      shop: {
        id: 0,
        name: '',
        logo: this.NoImageUrl,
        collectNums: 0,
        productNums: 0,
      },
      detail: {
        id: 0,
        score: 0
      },
      userInfo:{},
      isCollect: false
    }
  },
  mounted() {
    this.getDetail()
    if (this.CurrUser.IsLogin()) {
      this.checkCollect()
    }
  },
  methods: {
    showReplyAll: function () {
      localStorage.setItem('ProductDetailBackHome', '1')
      this.$router.push({name: 'ProductReplyList', query: {id: this.detail.id, name: this.detail.name}})
    },
    shareSystem: function () {
      let $this = this
      let shareLink = '【可可商城】' + this.detail.name + ' ' + this.detail.shopProductStock.model+ ' ' + window.location.href + '&onlyH5=1';
      $this.copyClipBoard(shareLink)
      // plus.share.sendWithSystem({type: 'text', content: '【可可商城】'+this.detail.name, href: window.location.href+'&onlyH5=1'}, function () {
      //   // $this.$message.success('分享成功');
      // }, function (e) {
      //   $this.$message.warning('取消分享');
      // });
    },
    back: function () {
      if (localStorage.getItem('ProductDetailBackHome')) {
        return this.$router.push('/')
      }
      this.$router.back()
    },
    isShopSkill: function () {
      return this.detail.shopProductStock.shopSkillStatus && this.detail.shopProductStock.shopSkillStatus.id === 1 && this.detail.shopProductStock.surplusSeconds
    },
    collect: function () {
      let $this = this
      if ($this.$route.query.onlyH5) {
        $this.$message.warning('请您下载App进行正式功能体验')
        return
      }
      $this.checkLoginAct(function () {
        $this.MyRequest($this.ApiDoNameMember + 'Member/collectProduct', {
          id: $this.$route.query.id
        }, function (data) {
          $this.isCollect = !$this.isCollect
          $this.$forceUpdate()
        }, function (data) {
          $this.successTip(data.message, 'error')
        })
      })
    },
    checkCollect: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'Member/isCollectProduct', {
        id: $this.$route.query.id
      }, function (data) {
        $this.isCollect = data
        $this.$forceUpdate()
      }, function (data) {
        $this.successTip(data.message, 'error')
      })
    },
    getShopDetail: function () {
      let $this = this
      $this.getPositionAndCallBack(function (currLocation) {
        $this.MyRequest($this.ApiDoNameMember + 'Shop/getDetail', {
          currLocation: currLocation,
          id: $this.detail.shopId
        }, function (data) {
          $this.shop = data
          $this.$forceUpdate()
        }, function (data) {
          $this.successTip(data.message, 'error')
        })
      })
    },
    setCacheParams: function (type) {
      var selectData = {
        shop: {
          id: this.detail.shopId,
          name: this.detail.shopName,
          logo: this.detail.shopLogo
        },
        productList: [
          {
            nums: 1,
            score: this.detail.shopProductStock.score,
            model: this.detail.shopProductStock.model,
            price: type !== 'group' ? this.detail.shopProductStock.price : this.detail.shopProductStock.groupPrice,
            shopProductName: this.detail.name,
            shopProductId: this.detail.id,
            image: this.detail.shopProductStock.image ? this.detail.shopProductStock.image : this.detail.shopProductStock.shopProductImage,
            id: this.detail.shopProductStock.id,
          }
        ]
      }
      console.log('this.detail',this.detail)
      console.log('selectData',selectData)
      localStorage.setItem('selectProductData', JSON.stringify(selectData))
    },
    // 单独购买
    goToBuy: function () {
      let $this = this
      $this.checkLoginAct(function () {
        $this.setCacheParams('one')
        if ($this.detail.shopProductStock.score>0){
          $this.MyRequest($this.ApiDoNameMember + 'Member/info', {
          }, function (data) {
            if (data.score<$this.detail.shopProductStock.score){
              return $this.$message.error('您的积分余额不足: '+$this.detail.shopProductStock.score);
            }
            $this.$router.push({
              name: 'ConfirmOrder',
              query: {
                type: 'one'
              },
            })
          })
        }else{
          $this.$router.push({
            name: 'ConfirmOrder',
            query: {
              type: 'one'
            },
          })
        }

      })
    },
    // 抢购选择
    goToShopSkill: function () {
      let $this = this
      $this.checkLoginAct(function () {
        $this.bus.$emit('ShopSkillProductDialogCallBus', $this.detail.shopProductStock)
      })
    },
    // 团购跳转
    goToGroupBuy: function () {
      // this.setCacheParams('group')
      let $this = this
      $this.checkLoginAct(function () {
        $this.bus.$emit('GroupOrderJoinDialogCallBus', {
          shopId: $this.detail.shopId,
          shopLogo: $this.detail.shopLogo,
          shopName: $this.detail.shopName,
          id: $this.detail.shopProductStock.id,
          shopProductId: $this.detail.id,
          shopProductName: $this.detail.name,
          name: $this.detail.name,
          image: $this.detail.shopProductStock.image?$this.detail.shopProductStock.image:$this.detail.image,
          model: $this.detail.shopProductStock.model,
          price: $this.detail.shopProductStock.price,
          groupNums: $this.detail.shopProductStock.groupNums,
          groupPrice: $this.detail.shopProductStock.groupPrice,
        })
      })
    },
    addCart: function () {
      let $this = this
      $this.checkLoginAct(function () {
        $this.bus.$emit('AddCartProductModelDialogCallBus', $this.detail.id, $this.detail.shopProductStock.model)
        return
        if ($this.detail.modelArr.length === 0) {
          // 没有型号商品加入购物车
          CartTools.addProduct(Object.assign($this.detail, {
            nums: 1,
            model: '常规',
            shopProductStockId: $this.detail.shopProductStock.id
          }))
          var currProduct = CartTools.getProduct($this.detail.id, '常规')
          this.bus.$emit('CartAddCallBus', 'ShopProductStock', $this.detail.shopProductStock.id, currProduct.nums, '常规')

          // $this.bus.$emit('CartAddCallBus','ShopProductStock',$this.detail.id,0,'常规')
        } else {
          CartTools.addProduct(Object.assign($this.detail, {
            nums: 1,
            model: $this.detail.shopProductStock.model,
            price: $this.detail.shopProductStock.price,
            shopProductStockId: $this.detail.shopProductStock.id,
          }))
          var currProduct = CartTools.getProduct($this.detail.id, $this.detail.shopProductStock.model)
          $this.bus.$emit('CartAddCallBus', 'ShopProductStock', $this.detail.shopProductStock.id, currProduct.nums, $this.detail.shopProductStock.model, function (res) {
            if (res.code > 0) {
              if (currProduct.nums > 0) {
                CartTools.addProduct(Object.assign($this.detail, {
                  nums: -1,
                  model: $this.detail.shopProductStock.model,
                  shopProductStockId: $this.detail.shopProductStock.id,
                  price: $this.detail.shopProductStock.price,
                }))
              }
              return $this.$message.error(res.message)
            } else {
              $this.$message.success('加入购物车成功')
            }
          })
        }
      })
    },
    chooseModel: function () {
      let $this = this
      if ($this.detail.shopProductStock.score>0){
        return;
      }
      $this.bus.$emit('ProductChooseModelDialogCallBus', 'productDetail', $this.detail, function (stock) {
        // console.log('stock',stock)
        $this.detail.shopProductStock = stock
        // $this.getDetail()
        $this.$forceUpdate()
      })
    },
    // 处理轮播图
    handlerBanner: function () {
      setTimeout(function () {
        var swiper = new Swiper('.swiper-banner', {
          // 底部分页导航
          pagination: {
            el: '.swiper-pagination',
          },
          // 自动播放
          autoplay: {
            delay: 2000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
          },
          // 切换效果:    slide(默认)=>滑动    fade=>渐入   cube=>盒子旋转  coverflow=>平面切换 flip=>平面翻转
          // effect : 'slide',
        })
        // 处理轮播图点击
        const gallery1 = new Viewer(document.getElementById('my-viewer'))
        // if (document.getElementsByClassName('reply-list').length > 0) {
        //   const gallery2 = new Viewer(document.getElementsByClassName('reply-list')[0])
        // }
      }, 800)
    },
    getModelDetail: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'ShopProduct/getDetail', {
        id: $this.$route.query.id,
        model: $this.$route.query.model ? $this.$route.query.model : '',
      }, function (data) {
        $this.detail.shopProductStock = data.shopProductStock
        $this.$forceUpdate()
      })
    },
    // 获取详情
    getDetail: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'ShopProduct/getDetail', {
        id: $this.$route.query.id,
        model: $this.$route.query.model ? $this.$route.query.model : '',
      }, function (data) {
        $this.detail.shopId = data.shopId
        $this.detail.shopLogo = data.shopLogo
        $this.detail.shopName = data.shopName
        $this.detail.name = data.name
        $this.detail.image = data.image
        $this.detail.imageArr = data.imageArr
        $this.detail.price = data.price
        $this.detail.oldPrice = data.oldPrice
        $this.detail.saleNums = data.saleNums
        $this.detail.score = data.score
        $this.detail.modelArr = data.modelArr
        $this.detail.replyList = data.replyList
        $this.detail.shopProductStock = data.shopProductStock
        $this.detail.id = data.id
        $this.detail.content = data.content

        // $this.detail.shopProductStock.shopSkillStatus={id:1}
        // $this.detail.shopProductStock.surplusSeconds=500
        $this.getShopDetail()
        $this.$forceUpdate()
        $this.handlerBanner()
      }, function (msg) {
        $this.$message.error(msg)
        $this.$router.back()
      })
    },
  }
}
</script>

<style>
.swiper {
  width: 500px;
  height: 200px;
}

.swiper-slide {
  color: #FFFFFF;
  text-align: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
